<template>
  <div class="item bg-[#f7f7f7] px-[12px] pt-[12px] pb-[4px]  mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'radio'},delay:500}">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">单选标题</a-typography-title>
      <a-typography-paragraph>
        <a-radio-group v-model:value="value" name="radioGroup">
          <a-radio value="1">选项一</a-radio>
          <a-radio value="2">选项二</a-radio>
          <a-radio value="3">选项三</a-radio>
        </a-radio-group>
      </a-typography-paragraph>
    </a-typography>
  </div>
  <div class="item bg-[#f7f7f7] px-[12px] pt-[12px] pb-[4px]  mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'checkbox'},delay:500}">
    <a-typography>
      <a-typography-title :level="5" class="pb-[10px] text-left font-14">多选标题</a-typography-title>
      <a-typography-paragraph>
        <a-checkbox-group v-model:value="value1" name="checkboxgroup" :options="plainOptions"/>
      </a-typography-paragraph>
    </a-typography>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import useQuestion from "../../../store/question.js";
import {uuid} from "vue-uuid";
import {storeToRefs} from "pinia";

const questionStore = useQuestion()
let {activeIndex,componentList} = storeToRefs(questionStore)
const radioObj = {
  "type": "questionRadio",
  "title": "单选",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "title": "单选标题",
    "isVertical": false,
    "options": [
      {
        "value": "item1",
        "text": "选项1"
      },
      {
        "value": "item2",
        "text": "选项2"
      },
      {
        "value": "item3",
        "text": "选项3"
      }
    ],
    "value": "item1"
  }
}
const checkboxObj = {
  "type": "questionCheckbox",
  "title": "多选",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "title": "多选标题",
    "isVertical": false,
    "list": [
      {
        "value": "item1",
        "text": "选项1",
        "checked": true
      },
      {
        "value": "item2",
        "text": "选项2",
        "checked": false
      },
      {
        "value": "item3",
        "text": "选项3",
        "checked": false
      }
    ]
  }
}
const addItem = ({type}) => {
  let id = uuid.v1()
  questionStore.changeEditKey('1')
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.addSnapshots({
    type: 'add',
    data: preVal
  })
  switch (type) {
    case 'radio':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...radioObj
      })
      questionStore.changeId(id)
      break;
    case 'checkbox':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...checkboxObj
      })
      questionStore.changeId(id)
      break;
  }
}
let value = ref('1')
let value1 = reactive(['选项一'])
const plainOptions = ['选项一', '选项二', '选项三'];
</script>

<style scoped>
.item {
  border: 1px solid #fff;
}

.item:hover {
  border: 1px solid #d9d9d9;
}
</style>
